<template id="ip_pool">
    <form class="layui-form layui-col-space10">
        <div class="layui-col-md2">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix"><i class="layui-icon layui-icon-read"></i></div>
                <input id="ip-search-id" name="ip" lay-affix="clear" placeholder="IP" class="layui-input">
            </div>
        </div>
        <div id="date-range" class="layui-col-md8 layui-col-space10">
            <div class="layui-col-md6">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix"><i class="layui-icon layui-icon-date"></i></div>
                    <input id="startDate" name="startTs" type="text" readonly placeholder="开始时间"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-input-wrap">
                    <div class="layui-input-prefix"><i class="layui-icon layui-icon-date"></i></div>
                    <input id="endDate" name="endTs" type="text" readonly placeholder="结束时间" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-md1">
            <button type="reset" class="layui-btn layui-btn-primary layui-btn-fluid" lay-submit lay-filter="clear">
                重置
            </button>
        </div>
        <div class="layui-col-md1">
            <button id="ip-search-btn" type="button" class="layui-btn layui-btn-fluid" lay-submit lay-filter="search">
                搜索
            </button>
        </div>
    </form>
    <table class="layui-hide" id="ip-pool"></table>
    <script>
        layui.use(function () {
            let table = layui.table;
            let form = layui.form;
            let laydate = layui.laydate;
            let $ = layui.jquery;

            form.render();
            laydate.render({
                elem: '#date-range',
                type: 'datetime',
                range: ['#startDate', '#endDate'],
            });

            // 创建表格实例
            table.render({
                elem: '#ip-pool',
                url: '/api/ips', // 此处为静态模拟数据，实际使用时需换成真实接口
                request: {
                    pageName: 'page', // 页码的参数名称，默认：page
                    limitName: 'size' // 每页数据条数的参数名，默认：limit
                },
                parseData: function (res) { // res 即为原始返回的数据
                    return {
                        "code": res.code, // 解析接口状态
                        "msg": res.msg, // 解析提示文本
                        "count": res.data.count, // 解析数据长度
                        "data": res.data.list // 解析数据列表
                    };
                },
                before: function (options) { // 当前实例属性配置项
                    options.headers = signHeader();
                },
                error: function (e, msg) {
                    console.log(e, "msg: ", msg)
                    if (e.status === 401) {
                        window.location.href = "/admin/login";
                    }
                },
                even: true,
                cols: [
                    [
                        {field: 'id', title: 'ID', width: 100, align: 'center', fixed: 'left'},
                        {field: 'ip', title: 'ip', minWidth: 200, align: 'center',},
                        {field: 'country', title: '国家', minWidth: 200, align: 'center',},
                        {field: 'region', title: '地区', minWidth: 200, align: 'center',},
                        {field: 'city', title: '城市', minWidth: 200, align: 'center',},
                        {field: 'isp', title: '运营商', minWidth: 200, align: 'center',},
                        {field: 'countryId', title: '国家编码', minWidth: 200, align: 'center',},
                        {field: 'cityId', title: '城市编码', minWidth: 200, align: 'center',},
                        {field: 'ispId', title: '运营商编码', minWidth: 200, align: 'center',},
                        {field: 'createTs', title: '访问时间', width: 180, align: 'center', sort: true},
                    ]
                ],
                page: true,
                // height: 500
            });

            // 搜索提交
            form.on('submit(search)', function (data) {
                let field = data.field; // 获得表单字段
                // 执行搜索重载
                table.reload('ip-pool', {
                    page: {
                        curr: 1 // 重新从第 1 页开始
                    },
                    where: field // 搜索的字段
                });
                return false; // 阻止默认 form 跳转
            });
            // 搜索提交
            form.on('submit(clear)', function () {
                table.reload('ip-pool', {
                    page: {
                        curr: 1 // 重新从第 1 页开始
                    },
                    where: null
                });
                return true;
            });
            $("#ip-search-id").on("keydown", function (event) {
                if (event.keyCode === 13) {
                    $("#ip-search-btn").trigger("click");
                    return false
                }
            });
        });
    </script>
</template>
